import { Table, Space, Button } from "antd"
import {
  CarOutlined,
  EyeOutlined,
  ExportOutlined
} from '@ant-design/icons'
import ShowRoad from "./ShowRoad"
import { useState } from "react"
import { useNavigate } from 'react-router-dom'
import { ExportExcel, paginationConfig } from "@/utils"

const ResultTable = ({ txtContent, folderContent, exportName }) => {
  const colunms = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      width: 150,
      render: (record) => <div>解决方案{record}</div>
    },
    {
      title: '车辆数量',
      dataIndex: 'num',
      key: 'num',
      align: 'center',
      ellipsis: true,
      width: 150,
      sorter: (a, b) => a.num - b.num,
      render: (record) => record
    },
    {
      title: '总旅行路程',
      dataIndex: 'dist',
      key: 'dist',
      align: 'center',
      ellipsis: true,
      width: 200,
      sorter: (a, b) => a.dist - b.dist,
      render: (record) => record
    },
    {
      title: '总旅行时间',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
      ellipsis: true,
      width: 200,
      sorter: (a, b) => a.time - b.time,
      render: (record) => record
    },
    {
      title: '总等待时间',
      dataIndex: 'wait',
      key: 'wait',
      align: 'center',
      ellipsis: true,
      width: 200,
      sorter: (a, b) => a.wait - b.wait,
      render: (record) => record
    },
    {
      title: '总延误时间',
      dataIndex: 'delay',
      key: 'delay',
      align: 'center',
      ellipsis: true,
      width: 200,
      sorter: (a, b) => a.delay - b.delay,
      render: (record) => record
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      align: 'center',
      ellipsis: true,
      fixed: 'right',
      width: 250,
      render: (record) => {
        return (
          <Space>
            <Button
              icon={<CarOutlined />}
              type="primary"
              style={{ background: "orange", }}
              onClick={() => showModal(record)}
            >
              查看路线
            </Button>
            <Button
              icon={<EyeOutlined />}
              type="primary"
              style={{ background: "#f759ab", }}
              onClick={() => showRoad(record)}
            >
              路径可视化
            </Button>
          </Space>
        )
      }
    }
  ]

  const processData = () => {
    if (txtContent) {
      return txtContent.map((row, rowIndex) => {
        return {
          key: rowIndex + 1,
          id: rowIndex + 1,
          num: row[0],
          dist: row[1],
          time: row[2],
          wait: row[3],
          delay: row[4]
        }
      })
    }
  }

  const data = processData()


  // 对话框
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [roadList, setRoadList] = useState([])
  const showModal = (record) => {
    setRoadList(folderContent[record.id - 1])
    setIsModalOpen(true)
  }
  const handleOk = () => {
    setIsModalOpen(false)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  // 可视化
  const navigate = useNavigate()
  const showRoad = (record) => {
    const roadList = folderContent[record.id - 1]
    const formattedPaths = []
    for (let i = 0;i < roadList.length;i += 2) {
      const path = roadList[i]
      formattedPaths.push(path)
    }

    const roadInfo = txtContent[record.id - 1]

    const infoObj = {
      id: record.id - 1,
      key: record.id - 1,
      r_num: roadInfo[0],
      dist: roadInfo[1],
      time: roadInfo[2],
      wait: roadInfo[3],
      delay: roadInfo[4]
    }

    navigate('/show', { state: { data: formattedPaths, info: infoObj } })
    // console.log(record)
  }

  // 表格标题，导出数据
  const Title = () => {
    return (
      <Button type='primary' onClick={() => ExportExcel(colunms, data, exportName)} icon={<ExportOutlined />}>导出表格</Button>
    )
  }


  return (
    <div>
      <Table
        title={Title}
        columns={colunms}
        dataSource={data}
        pagination={paginationConfig}
        bordered
        scroll={{
          x: '100vw',
          y: 'calc(100vh - 460px)',
        }}
      >
      </Table>
      <ShowRoad
        isModalOpen={isModalOpen}
        handleOk={handleOk}
        handleCancel={handleCancel}
        folderContent={folderContent}
        roadList={roadList}
      />
    </div>
  )
}

export default ResultTable